<html>
    <head>
        <title>Flash Plus : Configuration page</title>
        <style>
            body {
                font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
                font-size: 12px;
                background-color: #D5E5F7;
            }
            
            h1 {
                margin: 0.1em;
                font-size: 4em;
                text-shadow: 0px 0px 15px black;
                -webkit-text-fill-color: #F4F6FC;
                -webkit-text-stroke: 1px BLACK;
            }
            
            body > div {
                background-color: #F4F6FC;
                width: 80%;
                padding: 1%;
                margin: 2em auto 1em auto;
                -webkit-box-shadow: 0px 0px 35px BLACK;
                -webkit-border-radius: 20px;
            }
            
            .content {
                border: SOLID 2px #EBEFF9;
                background-color: white;
            }
            
            .clear {
                clear: both;
            }
            
            .config-group {
                font-size: 1.3em;
                padding: 1em;
                margin: 1em;
                clear: both;
                border: SOLID 1px transparent;
            }
            
            .config-group:hover {
            }
            
            .config-message {
                display: none;
                color: BLACK;
                background-color: #A0D70E;
                padding: 0.2em 1em 0.2em 1em;
                -webkit-border-radius: 5px;
            }
            
            .config-help {
                font-size: 0.8em;
                margin: 0.2em;
                padding: 0.5em;
            }
            
            #footer li {
                display: inline;
                border-right: SOLID 1px BLACK;
                padding: 0.1em 0.5em 0.1em 0.5em;
            }
            
            #footer li:last-child {
                border-right: none;
            }
            
            #footer li > a {
                text-decoration: none;
            }
            
            #footer li > a:hover {
                text-decoration: underline;
            }
        </style>
    </head>
    <body>
        <div>
            <div id = "head">
                <img id = "logo" src="../images/128icon.png" style ="float:left; margin-right : 1.5em;">
                <div style ="float:left;">
                    <h1>Flash Plus</h1>
                    <h2>Configuration Options</h2>
                </div>
                <div class = "clear">
                </div>
            </div>
            <hr/>
            <div id = "#content">
                <div class = "config-group">
                    Run extension when the page loads <input type = "checkbox" name = "canLoadOnStartup" id = "ChangeFlashOnLoad" class = "config-option" checked = "true"><span class = "config-message">Saved</span>
                    <div class = "config-help">
                        If you think flash components are appearing at wrong places on the page, uncheck this option.
                    </div>
                </div>
                <div class = "config-group">
                    Check the page for flash components <span class = "config-message">Saved</span>
                    <ul style ="list-style : none;">
                        <li>
                            <input type = "radio" name = "maxCheckTime" value = "2" checked="true" class = "config-option" id = "CheckTillLimited">&nbsp;&nbsp;until <input type = "text" name = "maxCheckTime" id = "CheckNSeconds" class = "config-option" style ="width : 2em" value = "2">&nbsp;seconds after the page is loaded. 
                        </li>
                        <li>
                            <input id = "maxCheckTime-forver" type = "radio" name = "maxCheckTime" value = "1" class = "config-option">&nbsp;&nbsp;forever after the page is loaded. 
                        </li>
                    </ul>
                    <div class = "config-help">
                        Some flash elements appear on the page only when you click something. 
                    </div>
                </div>
                <div class = "config-group">
                    Enable Logging on console<input type = "checkbox" name = "enableLogging" id = "enableLogging" class = "config-option" checked = "true"><span class = "config-message">Saved</span>
                    <div class = "config-help">
                        Check this option if you would like to see the logs when the application is running. 
                        <br/>
                        These logs may be useful when you report errors about this extension to the <a href='http://nparashuram.com'>developer</a>. 
                    </div>
                </div>
                <div id = "footer">
                    <hr/>
                    <center>
                        <ul style="list-style:none">
                            <li>
                                <a href = "http://bit.ly/flashplus" target="_blank">Home</a>
                            </li>
                            <li>
                                <a href = "http://code.google.com/p/flashchrome/wiki/FAQ" target="_blank">FAQ</a>
                            </li>
                            <li>
                                <a href = "http://nparashuram.com" target="_blank">Developer</a>
                            </li>
                            <li>
                                <a href = "http://code.google.com/p/flashchrome/" target="_blank">Source Code</a>
                            </li>
                            <li>
                                <a href = "http://code.google.com/p/flashchrome/issues" targer = "_blank">Bugs/Issues</a>
                            </li>
                            <li>
                                <a href = "http://axemclion.github.com/#contact.html" target = "_blank">Contact Us</a>
                            </li>
                        </ul>
                    </center>
                </div>
            </div>
        </div>
    </body>
    <script src= "../jquery/js/jquery-1.4.1.min.js" type="text/javascript">
    </script>
    <script type="text/javascript">
        $("#maxCheckTime-forver").val(Number.MAX_VALUE);
        
        $("input[type=radio][name=maxCheckTime][value=" + localStorage["maxCheckTime"] + "]").attr("checked", true);
        if (localStorage["maxCheckTime"] !== "-1") {
            $("#CheckNSeconds").attr("value", localStorage["maxCheckTime"]);
        }
        
        $("#CheckNSeconds").bind("change", function(){
            $("#CheckTillLimited").attr("value", this.value).attr("checked", true).focus();
        });
        
        // For all checkboxes.
        $("input[type=checkbox]").attr("checked", function(){
            return localStorage[this.name] === "true";
        });
        $("input[type=checkbox]").bind("change", function(){
            this.value = this.checked;
        });
        
        // This should always be at the end so that the value on change is set properly
        $(".config-option").bind("change", function(){
            localStorage[this.name] = this.value;
            var msgDiv = $(this).parents(".config-group").find(".config-message").hide().fadeIn();
            window.setTimeout(function(){
                msgDiv.fadeOut();
            }, 3000);
        });
    </script>
</html>
